<template>
	<div class="searchWrapper" ref="searchWrapper">
		<div class="searchBox" @click="toView('/course/search')">
			<div class="iconspan">
				<van-icon class="icon" class-prefix="iconfont" name="search" />
				<span>搜索课程</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		methods:{
			toView(path) {
				console.log("toView")
				this.$router.push(path);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/css/variable';
	.searchWrapper{
			background-color: $main-bgc-white;
			padding: 1.6rem;
			display: flex;
			flex: 1;
		.searchBox {
			flex:1;
			border-radius: 2rem;
			height: 3.6rem;
			background-color: $main-bgc-gray;
			text-align: center;
			color: #bfbfbf;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 3;
			.iconspan {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #888;
		
				.icon {
					font-size: 1.4rem;
				}
		
				span {
					margin-left: 0.8rem;
					font-size: 1.2rem;
				}
			}
		}
	}
</style>
